<template>
  <div class="comment-floor">
    <!-- 这里是组件递归实现渲染评论列表 -->
    <parentfloor
      :parentComment="parentComment.parent"
      v-if="parentComment.parent"
      @setData="setData"
    />
    <div class="message">
      <el-row class="title" type="flex" justify="space-between">
        <div class="left">
          <img :src="$axios.defaults.baseURL + parentComment.account.defaultAvatar" class="userImg" />
          <span class="userName">{{parentComment.account.nickname}}</span>
          <span class="time">{{parentComment.updated_at | formatTime}}</span>
        </div>
        <div class="right">{{parentComment.level}}</div>
      </el-row>
      <div class="content" @mouseenter="isShow = true" @mouseleave="isShow = false">
        <div class="text">{{parentComment.content}}</div>
        <el-row class="imgList" type="flex" v-if="parentComment.pics.length > 0">
          <div class="img" v-for="(e,index) in parentComment.pics" :key="index">
            <img
              :src="$axios.defaults.baseURL + e.url"
              alt
              @click="imgDialog($axios.defaults.baseURL + e.url)"
            />
            <el-dialog :visible.sync="imgVisible">
              <img width="100%" :src="imageUrl" alt />
            </el-dialog>
          </div>
        </el-row>
        <div class="bottom">
          <a href="#textarea" class="reply" v-show="isShow" @click="setData">回复</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "parentfloor",
  props: ["parentComment"],
  data() {
    return {
      isShow: false,

      imgVisible: false, // 图片预览数据
      imageUrl: ""
    };
  },
  filters: {
    // 过滤器将时间戳转换成日期格式
    formatTime(val, format) {
      return moment(val).format(format || "YYYY-MM-DD HH:mm");
    }
  },
  methods: {
    // 递归回复: 楼层一层层的递归其实是一层层的父子组件,事件能递归的传出来
    setData(obj) {
      // console.log(obj)
      // 判断传过来的 obj ,如果在最外层的父评论评论,此时 obj 没有传值是当前的点击事件
      if (obj.id) {
        // 如果 obj.id 存在,就证明不是当前的点击事件,将数据原封不动的往外传
        this.$emit("setData", obj);
      } else {
        this.$emit("setData", {
          id: this.parentComment.id,
          name: this.parentComment.account.nickname
        });
      }
    },
    // 点击  图片预览
    imgDialog(url) {
      this.imgVisible = true;
      this.imageUrl = url;
    }
  }
};
</script>

<style lang="less" scoped>
.comment-floor {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 6px;
  .title {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    .time {
      color: #999;
    }
    .userImg {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
  }
  .message {
    padding: 5px 10px 0;
  }
  .content {
    .text {
      margin-top: 10px;
    }
    .img {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 5px;
      margin-top: 10px;
      padding: 5px;
      border: 1px dashed #ddd;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
      }
    }
    .bottom {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #1e50a2;
      text-align: right;
    }
  }
}
</style>